<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import ranking1 from '../../../../../assets/bigScreen/ranking1.png'
import ranking2 from '../../../../../assets/bigScreen/ranking2.png'
import ranking3 from '../../../../../assets/bigScreen/ranking3.png'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
})
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
    grid: {
        top: '10%',
        right: '0%',
        left: '0%',
        bottom: '0%',
        containLabel: true,
    },
    legend: {
        top: '5%',
        x: 'center',
        textStyle: {
            color: '#9E9E9E',
        },
    },
    xAxis: {
        // data: [1820, 200, 150, 80, 70, 110, 110, 130, 120, 50, 60, 30],
        type: 'value',
        show: false,
    },
    yAxis: [
        {
            type: 'category',
            triggerEvent: true,
            show: true,
            inverse: true,
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            data: [
                '行业准入',
                '评审',
                '鉴定',
                '验收',
                '机构评价',
                '评估',
                '结题',
            ],
            axisLabel: {
                interval: 0,
                color: '#fff',
                align: 'left',
                margin: 70,
                fontSize: 13,
                // formatter: (value, index) => {
                //     // return index<3?`{idxs|No.${index+1}${value}}`:value
                //     return index<3?`{idxs${index}|}{idxs|${value}}`:value
                // },
                rich: {
                    idxs: {
                        color: '#00FFF4',
                        padding: [0,0,0,0]
                    },
                    idxs0: {
                        backgroundColor: {
                            image: ranking1
                        },
                        height: 16
                    },
                    idxs1: {
                        backgroundColor: {
                            image: ranking2
                        },
                        height: 16
                    },
                    idxs2: {
                        backgroundColor: {
                            image: ranking3
                        },
                        height: 16
                    },
                },
            },
        },
        {
            data: [12,4,142,481,134,33,255],
            type: 'category',
            triggerEvent: true,
            show: true,
            inverse: true,
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                // interval: 0,
                color: '#fff',
                align: 'right',
                margin: 50,
                fontSize: 13,
                formatter: function(value, index) {
                    return value + '/次'
                },
                // rich: {
                //     idx0: {
                //         color: '#FB375E',
                //         backgroundColor: '#FFE8EC',
                //         borderRadius: 100,
                //         padding: [5, 8],
                //     },
                //     idx1: {
                //         color: '#FF9023',
                //         backgroundColor: '#FFEACF',
                //         borderRadius: 100,
                //         padding: [5, 8],
                //     },
                //     idx2: {
                //         color: '#01B599',
                //         backgroundColor: '#E1F7F3',
                //         borderRadius: 100,
                //         padding: [5, 8],
                //     },
                //     idx: {
                //         color: '#333',
                //         borderRadius: 100,
                //         padding: [5, 8],
                //     },
                //     title: {
                //         width: 80,
                //     },
                // },
            },
        },
    ],
    series: [
        {
            data:  [12,4,142,481,134,33,255],
            type: 'bar',
            showBackground: true,
            barWidth: 15,
            backgroundStyle: {
                // color: '#091D40',
                color: 'rgba(180, 180, 180, 0.1)',
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                        {
                            offset: 0,
                            color: '#091D40',
                        },
                        {
                            offset: 0.5,
                            color: '#0281CB',
                        },
                        {
                            offset: 1,
                            color: '#00FFF4',
                        },
                    ]),
                },
            },
        },
    ],
}
const chart = ref()
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
